<!-- 三级联动、 -->
<template>
  <div id="app">
    <el-form :inline="true" :model="categoryId" class="demo-form-inline">
      <el-form-item label="一级联动">
        <!-- <el-select v-model="formInline.region" placeholder="活动区域"> -->
        <el-select
          placeholder="请选择"
          v-model="categoryId.item1Id"
          @change="hande1"
          :disabled="addAttr"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in list1"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级联动" style="margin: 0 50px">
        <!-- <el-select v-model="formInline.region" placeholder="活动区域"> -->
        <el-select
          placeholder="请选择"
          v-model="categoryId.item2Id"
          @change="hande2"
          :disabled="addAttr"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in list2"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级联动">
        <!-- <el-select v-model="formInline.region" placeholder="活动区域"> -->
        <el-select
          placeholder="请选择"
          v-model="categoryId.item3Id"
          @change="hande3"
          :disabled="addAttr"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in list3"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getCategory1, getCategory2, getCategory3 } from "@/api/product/attr";
export default {
  name: "level3",
  props: ["addAttr"],
  data() {
    return {
      formInline: [],
      list1: [],
      list2: [],
      list3: [],
      // 收集的数据
      categoryId: {
        item1Id: "",
        item2Id: "",
        item3Id: "",
      },
    };
  },

  mounted() {
    this.getCategory1();
  },
  methods: {
    // 获取第一级别的数据
    async getCategory1() {
      let res = await getCategory1();
      console.log(res);
      if (res.code == 200) {
        this.list1 = res.data;
      }
    },
    // 当第一级别选择了之后去调用二级的数据
    async hande1() {
      this.list2 = [];
      this.list3 = [];
      this.categoryId.item2Id = "";
      this.categoryId.item3Id = "";
      let res = await getCategory2(this.categoryId.item1Id);
      console.log(res);
      if (res.code == 200) {
        this.list2 = res.data;
      }
    },
    // 当第二级别选择了之后去调用三级的数据
    async hande2() {
      this.list3 = [];
      this.categoryId.item3Id = "";
      let res = await getCategory3(this.categoryId.item2Id);
      console.log(res);
      if (res.code == 200) {
        this.list3 = res.data;
      }
    },
    hande3() {
      this.$emit("getId", this.categoryId);
    },
  },
};
</script>
